<template>
  <div
    class="tags-view-container overflow-x-auto scrollbar scrollbar-thumb-gray-200"
  >
    <div id="guide-tags">
      <router-link
        class="tags-view-item"
        :class="[isActive(tag) ? 'active' : '']"
        :style="{
          backgroundColor: isActive(tag) ? themeStore.variableColors.menuBg : '',
          borderColor: isActive(tag) ? themeStore.variableColors.menuBg : ''
        }"
        v-for="(tag, index) in appStore.tagsViewList"
        :key="tag.fullPath"
        :to="{ path: tag.fullPath }"
        @contextmenu.prevent="openMenu($event, index)"
      >
        {{ tag.title }}
        <svg-icon
          class="deleteIcon w-[14px] h-[14px] hover:scale-125"
          name="close"
          v-show="!isActive(tag)"
          @click.prevent.stop="onCloseClick(index)"
        ></svg-icon>
      </router-link>
    </div>
    <context-menu v-show="visible" :style="menuStyle" :index="selectIndex"></context-menu>
  </div>
</template>

<script setup>
import Sortable from 'sortablejs'
import { ref, reactive, watch, onMounted } from 'vue'
import ContextMenu from './ContextMenu.vue'
import { useRoute } from 'vue-router'
import { useThemeStore } from '@/stores/modules/theme'
import { useAppStore } from '@/stores/modules/app'
const themeStore = useThemeStore()
const appStore = useAppStore()
const route = useRoute()

/**
 * 是否被选中
 */
const isActive = (tag) => {
  return tag.path === route.path
}

/**
 * 关闭 tag 的点击事件
 */
const onCloseClick = (index) => {
  appStore.removeTagsView({ type: 'index', index })
}

// contextMenu 相关
const selectIndex = ref(0)
const visible = ref(false)
const menuStyle = reactive({
  left: 0,
  top: 0
})
/**
 * 展示 menu
 */
const openMenu = (e, index) => {
  const { x, y } = e
  menuStyle.left = x + 'px'
  menuStyle.top = y + 'px'
  selectIndex.value = index
  visible.value = true
}

/**
 * 关闭 menu
 */
const closeMenu = () => {
  visible.value = false
}

/**
 * 监听menu变化
 */
watch(visible, (val) => {
  if (val) {
    // 利用冒泡
    document.body.addEventListener('click', closeMenu)
  } else {
    document.body.removeEventListener('click', closeMenu)
  }
})
onMounted(() => {
  let el = document.getElementById('guide-tags')
  //设置配置
  let ops = {
    animation: 200,
    // ghostClass: 'sortable-ghost',
    //拖动结束
    onEnd: function ({ newIndex, oldIndex }) {
      console.log(newIndex, oldIndex)
    }
  }
  //初始化
  let sortable = Sortable.create(el, ops)
})
</script>

<style lang="scss" scoped>
.tags-view-container {
  position: relative;
  z-index: 2;
  height: 34px;
  width: 100%;
  background: #fff;
  border-bottom: 1px solid #d8dce5;
  box-shadow:
    0 1px 3px 0 rgba(0, 0, 0, 0.12),
    0 0 3px 0 rgba(0, 0, 0, 0.04);
  .tags-view-item {
    display: inline-block;
    position: relative;
    cursor: pointer;
    height: 26px;
    line-height: 26px;
    border: 1px solid #d8dce5;
    color: #495060;
    background: #fff;
    padding: 0 8px;
    font-size: 12px;
    margin-left: 5px;
    margin-top: 4px;
    &:hover {
      background-color: rgba(48, 65, 86, 0.2);
      transition: all 0.58s;
    }
    &:first-of-type {
      margin-left: 15px;
    }
    &:last-of-type {
      margin-right: 15px;
    }
    &.active {
      color: #fff;
      &::before {
        content: '';
        background: #fff;
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        position: relative;
        margin-right: 4px;
      }
    }
    // close 按钮
    .deleteIcon {
      vertical-align: middle;
    }
  }
}
</style>
